@import '../../../../styles/periodic-variables';

$default-font-size: 1.4rem;
$phase-font-size: 2.5rem;
$shell-font-size: 0.85rem;
$name-font-size: 0.75rem;

@mixin listItemStyle {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.atom {
  background: #000;

  &-container {
    display: flex;
    height: 100%;
    padding: 5px;

    &-summary {
      @include listItemStyle();

      font-size: $default-font-size;
      flex: 1 0 auto;
      overflow: auto;

      .name {
        color: #fff;
        font-size: $shell-font-size;
      }

      .description {
        font-size: $name-font-size;
        margin-top: 8px;
        width: 128px;
        height: 120px;
        color: #fff;
        display: -webkit-box;
        -webkit-line-clamp: 6;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    &-shelf {
      @include listItemStyle;

      font-size: $shell-font-size;
      flex: 0 0 auto;
      text-align: right;
    }
  }
}
